<template>
  <div id="app">
    <ul class="layui-nav layui-bg-blue" lay-filter="" style="padding: 0px">
      <li class="layui-nav-item"><img src="static/images/蜗牛影院.jpg" alt="" style="height:61px"></li>
      <li class="layui-nav-item" style="margin-left:50px">
        <el-select v-model="value" placeholder="请选择" size="mini" :filterable="true" @change="searchCityMovie">
          <el-option-group
            v-for="group in options"
            :key="group.label"
            :label="group.label">
            <el-option
              v-for="item in group.options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-option-group>
        </el-select>
      </li>
      <li class="layui-nav-item" :class="{'layui-this':isActive==1}" @click="switchCurrentNav(1)">
        <router-link to="/"><i class="layui-icon">&#xe68e;</i>首页</router-link>
      </li>
      <li class="layui-nav-item" :class="{'layui-this':isActive==2}" @click="switchCurrentNav(2)">
        <router-link to="/school_movie">校园影院</router-link>
      </li>
      <li class="layui-nav-item" :class="{'layui-this':isActive==3}" @click="switchCurrentNav(3)">
        <router-link to="/view_order">订单详情</router-link>
      </li>
      <li class="layui-nav-item" style="margin-left: 300px">
        <!--        <el-input v-model="searchMovie" placeholder="搜索电影" clearable suffix-icon="el-icon-search" @change="searchMovieInput"></el-input>-->
        <el-select
          v-model="searchMovie"
          :multiple="false"
          filterable
          remote
          reserve-keyword
          placeholder="搜索电影"
          :remote-method="remoteMethod"
          @change="toMovieDetail"
          value-key="id"
          :loading="loading">
          <el-option
            v-for="item in searchMovieResult"
            :key="item.id"
            :label="item.original_title"
            :value="item">
          </el-option>
        </el-select>
      </li>
      <li class="layui-nav-item" style="margin-left: 300px" v-if="!generalUser">
        <router-link to="/login_register_page"><i class="layui-icon">&#xe66f;登陆/注册</i></router-link>
      </li>
      <li class="layui-nav-item" style="margin-left: 250px" v-if="generalUser">
        <img src="static/images/默认头像.jpeg" alt="" style="width: 30px;width: 30px;border-radius: 15px">
        <el-dropdown>
          <el-button type="primary">
            {{generalUser.telphone}}<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item><span>个人中心</span></el-dropdown-item>
            <el-dropdown-item><span @click="loginOut">退出</span></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </li>
      <!--      <button @click="test">测试</button>-->
    </ul>
    <router-view v-if="isRouterAlive"/>
  </div>
</template>

<script>
    export default {
        name: 'App',
        data() {
            return {
                isActive: 1,
                generalUser: "",
                options: [{
                    label: '热门城市',
                    options: [{
                        value: '重庆',
                        label: '重庆'
                    }, {
                        value: '北京',
                        label: '北京'
                    }]
                }, {
                    label: '城市名',
                    options: [{
                        value: '成都',
                        label: '成都'
                    }, {
                        value: '深圳',
                        label: '深圳'
                    }, {
                        value: '广州',
                        label: '广州'
                    }, {
                        value: '大连',
                        label: '大连'
                    }]
                }],
                value: '重庆',
                searchMovie: "",
                isRouterAlive: true,
                searchMovieResult: [],
                loading: false
            }
        },
        methods: {
            switchCurrentNav(currentIndex) {
                this.isActive = currentIndex
            },
            test() {
                console.log(this.searchMovieResult)
            },
            searchCityMovie() {
                sessionStorage.setItem("currentCity", this.value)
                this.reload()
            },
            reload() {
                this.isRouterAlive = false
                this.$nextTick(function () {
                    this.isRouterAlive = true
                })
            },
            loginOut() {
                this.$axios.get('/api/tato/loginOut', {}).then((res) => {
                    sessionStorage.removeItem("generalUser")
                    this.generalUser = ""
                    window.location.reload()
                }).catch(function (error) {
                    console.log(error);
                });
            },
            remoteMethod(query) {
                if (query !== '') {
                    this.loading = true;
                    this.$axios.get('/api/tato/searchMovieByMovieName', {
                        params: {
                            movieName: query
                        }
                    }).then((res) => {
                        this.loading = false;
                        this.searchMovieResult = []
                        if (res.data.length == 0) {
                            this.searchMovieResult = []
                        } else {
                            for (let i = 0; i < res.data.length; i++) {
                                this.searchMovieResult.push(JSON.parse(res.data[i]))
                            }
                        }
                    })
                } else {
                    this.searchMovieResult = [];
                }
            },
            toMovieDetail() {
                this.reload()
                sessionStorage.setItem("movieInfo", JSON.stringify(this.searchMovie))
                this.$nextTick(() => {
                    this.$router.push({
                        name: "movie_detail"
                    })
                })
            }
        },
        created() {
            layui.use('element', function () {
                var element = layui.element
            });
            sessionStorage.setItem("currentCity", "重庆")
        },
        mounted() {
            this.generalUser = JSON.parse(sessionStorage.getItem("generalUser"))
        },
        provide() {
            return {
                reload: this.reload
            }
        }
    }
</script>

<style>
  .el-dropdown-link {
    cursor: pointer;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
